<template>
  <view class="box" v-if="lists.length > 0">
    <view class="titles">
      <view class="flex align-center">
        <text class="text-333 text-lg text-bold">超值拼单</text>
        <text class="margin-left-sm text-sm" style="color: #5F6166;">一起拼 更便宜</text>
      </view>
      <navigator url="/pages/activity/assemble/assemble-list/index">
        <view class="flex align-center">
          <text class="text-sm" style="color: #5F6166;">更多</text>
          <text class="cuIcon-right margin-left-xs" style="font-size: 20rpx;color: #B1B4BA;"></text>
        </view>
      </navigator>
    </view>
    <view class="margin-top-sm">
      <block v-for="(item, index) in lists" :key="index">
        <view class="list-item padding-tb-sm flex solid-bottom" @click="toDetail(item)">
          <view class="block-246">
            <image class="radius" :src="item.thumb" mode="aspectFill" lazy-load></image>
          </view>
          <view class="margin-left-sm flex-sub flex flex-direction justify-between">
            <view class="text-df text-333 text-cut-2 text-bold">{{ item.name }}</view>
            <view class="flex align-center">
              <view class="cu-progress round xs" style="width: 65%;"><view class="bg-theme" :style="{ width: item.rate + '%' }"></view></view>
              <text class="text-999 text-xs margin-left-xs">{{ item.rate + '%' }}</text>
            </view>
            <view class="text-xs text-999 text-cut">
              <text>{{ item.sales_sum }}人成功拼单</text>
              <text v-if="item.sales_sum != 0 && item.discounts != 0" class="margin-left-xs">成功为他们省了{{ (item.sales_sum * item.discounts) | filterPrice }}元</text>
            </view>
            <view class="flex align-center">
              <view class="flex-sub flex flex-direction">
                <view>
                  <text class="text-price text-sm color1"></text>
                  <text class="text-xl text-bold color1">{{ item | filterGoodsPrice }}</text>
                </view>
                <view class="text-through text-sm text-999">
                  <text class="text-price">{{ item.market_price }}</text>
                </view>
              </view>
              <view class="action"> 
                <view class="left">
                  <text>赚</text>
                  <text class="text-bold">{{ item.discounts }}</text>
                </view>
                <view class="right"><text class="title">马上拼</text></view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ben-assemble',
  data() {
    return {
      lists: []
    };
  },
  filters: {
    filterPrice(val) {
      if (!val) return '';
      return Number(val).toFixed(1);
    }
  },
  methods: {
    // 获取拼团活动
    getAssemble() {
      let data = {
        start_time: 0,
        end_time: 23,
        page: 1,
        size: 5,
        type: 2
      };
      this.$api.post(global.apiUrls.postSeckillList, data).then(res => {
        console.log('拼团: ', res);
        if (res.data.code == 1) {
          this.lists = res.data.data.list;
        }
      });
    },
    // 去详情页
    toDetail(item) {
      this.$urouter.navigateTo({
        url: '/pages/activity/assemble/assemble-detail/index',
        params: {
          goods_id: item.id,
          activity_id: item.activity_id || 0,
          sku_id: item.sku_id
        }
      });
    },
    // 重置
    refresh() {
      this.getAssemble();
    }
  },
  created() {
    this.getAssemble();
  }
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 0 20rpx;
  .titles {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .list-item {
    overflow: hidden;
    .action {
      width: 203rpx;
      height: 66rpx;
      background: url('./static/spell.png');
      background-size: cover;
      background-repeat: no-repeat;
      display: flex;
      .left {
        width: 70rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 20rpx;
        color: #b16e05;
      }
      .right {
        flex: 1;
        padding-left: 16rpx;
        font-size: 26rpx;
        color: #ffffff;
        font-weight: bold;
        line-height: 66rpx;
        text-align: center;
        .title {
          animation: heart 1s infinite;
        }
      }
    }
  }
}

.block-246 {
  width: 246rpx;
  height: 246rpx;
  min-width: 246rpx;
  min-height: 246rpx;
  background-color: #f8f8f8;
  position: relative;
  image {
    width: 100%;
    height: 100%;
  }
  .tag {
    position: absolute;
    top: 0;
    left: 0;
  }
}
.color1 {
  color: #f02325;
}
.color2 {
  color: #fa9c24;
}
@keyframes heart {
  0% {
    font-size: 20rpx;
  }
  50% {
    font-size: 26rpx;
  }
  100% {
    font-size: 20rpx;
  }
}
</style>
